<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="站内转账" leftIconColor="#fff" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view style="height: 100rpx;"></view>
		<view class="content-box">
			<view class="entry">
				<view class="content-title">
					转账余额
				</view>
				<u--input type="number" maxlength="16" border="none" color="#fff" v-model="balance"
					placeholder="请输入转账余额" inputAlign="right">
				</u--input>
			</view>
			<view class="entry">
				<view class="content-title">
					可用余额
				</view>
				{{usable_balance}}云矿石
			</view>
			<view class="entry">
				<view class="content-title">
					接收账户
				</view>
				<u--input type="text" maxlength="16" border="none" color="#fff" v-model="account"
					placeholder="请输入接收人账户">
					<template slot="suffix">
						<view class="entry-text" @click="validate">
							验证账号
						</view>
					</template>
				</u--input>
			</view>
			<view class="entry">
				<view class="content-title">
					支付密码
				</view>
				<u--input maxlength="16" :type="pass_type" border="none" color="#fff" v-model="password"
					placeholder="请输入支付密码">
					<template slot="suffix">
						<u-icon v-if="pass_type == 'password'" name="eye-fill" color="#fff" size="18"
							@click="changeType"></u-icon>
						<u-icon v-else name="eye-off" color="#fff" size="18" @click="changeType"></u-icon>
					</template>
				</u--input>
			</view>
			<view class="tips">
				提示：站内互转收取手续费5%
			</view>
			<view class="btn" @click="affirm">
				<u-button size="large" class="btn-color" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					type="primary" text="确认" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: '',
				password: '',
				pass_type: 'password',
				usable_balance: '',
				account: '',
				status: 1
			}
		},
		onLoad() {
			this.getbalance()
		},
		methods: {
			changeType() {
				if (this.pass_type == 'password') {
					this.pass_type = 'text'
				} else {
					this.pass_type = 'password'
				}
			},
			getbalance() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/myIndex',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.usable_balance = res.data.user.balance
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			validate() {
				if (this.account == '') {
					uni.showToast({
						title: '接收人不能为空',
						icon: 'none'
					})
					return
				}
				let params = {
					mobile: this.account
				}
				this.$Request({
					method: 'POST',
					url: '/api/Mutualaidorder/transferOut',
					data: params
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '验证成功',
							icon: 'none'
						})
						this.status = 2
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			affirm() {
				if (this.balance == '') {
					uni.showToast({
						title: '余额不能为空',
						icon: 'none'
					})
					return
				}
				if (this.balance > this.usable_balance) {
					uni.showToast({
						title: '大于可用余额',
						icon: 'none'
					})
					return
				}
				if (this.account == '') {
					uni.showToast({
						title: '接收人不能为空',
						icon: 'none'
					})
					return
				}
				if (this.account == '') {
					uni.showToast({
						title: '接收人不能为空',
						icon: 'none'
					})
					return
				}
				if (this.status != 2) {
					uni.showToast({
						title: '验证账户没有通过',
						icon: 'none'
					})
					return
				}
				let params = {
					num: this.balance,
					password: this.password,
					mobile: this.account
				}

				this.$Request({
					method: 'POST',
					url: '/api/Mutualaidorder/energyTransfer',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.balance = ''
						this.password = ''
						this.account = ''
						uni.showToast({
							title: '转账成功！',
							icon: 'none'
						})
						this.getbalance()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #17191A;
	}

	.btn-color {
		color: #17191A !important;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 558rpx;

		.content-box {
			padding: 30rpx;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			color: #fff;

			.entry {
				padding: 30rpx;
				background-color: rgba(238, 238, 238, 0.2);
				border-radius: 40rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.content-title {
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 600;
				}

				.entry-text {
					font-size: 26rpx;
					color: #fff;
				}

				.success {
					color: #5ff142;
				}

				.fail {
					color: #ff0000;
				}
			}

			.btn {
				padding: 30rpx;
				margin-top: 30rpx;
			}

			.tips {
				margin-top: 30rpx;
			}
		}
	}
</style>